<template>
    <div class="app-container">
        <el-upload
          class="upload-demo"
          drag
          action="https://www.lunzi.online/utils/upload.json"
          :before-upload="beforeUpload"
          :on-success="uploadCallback"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip p15" slot="tip">只能上传xlsx文件</div>
        </el-upload>
        
        <el-button v-if="list !== null && list.length > 0" @click="insertData">导入数据库</el-button>
        <el-table :data="list" stripe border fit highlight-current-row fixed style="width: 100%"
        v-loading="listLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">

           
            <el-table-column v-for="(th, i) in ths" label="">
                <template slot-scope="scope"> 
                    {{scope.row[i]}}
                </template>
            </el-table-column>
           
        </el-table>
    </div>
</template>

<script>
import { APIinsertImportData } from 'api'

export default {
    data() {
        return {

            ths: [],
            list: null
        }
    },

    created() {
        // this.fetchData()
    },
    methods: {
        beforeUpload(file){
            // console.log(file)
            // const isJPG = file.type === 'xlsx';
            // const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //     this.$message.error('上传文件只能是 xlsx 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        },

        uploadCallback(res){
            console.log(res)
            this.ths = res.result[0].data[0];
            this.list = res.result[0].data;
        },

        insertData(){
            let ops = {
                list: this.list,
                host: 'liuhaojie'
            }
            APIinsertImportData(ops).then(res => {
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
            })
        }

    }
}
</script>
<style>
.app-container{ padding: 20px; background-color: #fff;}
</style>
